// 获取DOM元素
const carouselSlide = document.querySelector('.carousel-slide');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const indicatorsContainer = document.getElementById('indicators');

// 初始化变量
let currentIndex = 0;
const slideCount = slides.length;
let slideInterval; // 自动轮播定时器
const slideTime = 3000; // 3秒自动轮播

// 创建指示点
function createIndicators() {
  for (let i = 0; i < slideCount; i++) {
    const indicator = document.createElement('button');
    indicator.classList.add('indicator'); // 每个指示点添加indicator类名
    if (i === 0) { // 第一个指示点添加active类名
      indicator.classList.add('active'); // 第一个指示点添加active类名
    }

    indicator.addEventListener('click', () => { // 点击指示点切换到对应的幻灯片
      goToSlide(i); // 切换到指定幻灯片
      resetSlideInterval(); // 重置自动轮播定时器
    });

    indicatorsContainer.appendChild(indicator); // 将每个指示点添加到指示点容器中
  }
}

// 更新指示点状态
function updateIndicators() {
  const indicators = document.querySelectorAll('.indicator'); // 获取所有指示点元素
  indicators.forEach((indicator, index) => {
    if (index === currentIndex) {
      indicator.classList.add('active'); // 如果当前索引与指示点索引匹配，添加active类名
    } else {
      indicator.classList.remove('active'); // 否则移除active类名
    }
  });
}

// 切换到指定幻灯片
function goToSlide(index) {
  currentIndex = index;
  if (currentIndex < 0) currentIndex = slideCount - 1; // 如果当前索引小于0，设置为最后一张幻灯片的索引
  if (currentIndex >= slideCount) currentIndex = 0; // 如果当前索引大于等于幻灯片数量，设置为第一张幻灯片的索引

  carouselSlide.style.transform = `translateX(-${currentIndex * 100}%)`; // 切换到指定幻灯片的位置，通过 translateX 实现水平平移
  updateIndicators();
}

// 下一张幻灯片
function nextSlide() {
  goToSlide(currentIndex + 1);
}

// 上一张幻灯片
function prevSlide() {
  goToSlide(currentIndex - 1);
}

// 设置自动轮播
function startSlideInterval() {
  slideInterval = setInterval(nextSlide, slideTime); // 启动自动轮播定时器，每 slideTime 毫秒调用一次 nextSlide 函数
}

// 重置自动轮播
function resetSlideInterval() {
  clearInterval(slideInterval);
  startSlideInterval();
}

// 添加事件监听器
function setupEventListeners() {
  // 左右箭头点击事件
  prevBtn.addEventListener('click', () => {
    prevSlide();
    resetSlideInterval();
  });

  nextBtn.addEventListener('click', () => {
    nextSlide();
    resetSlideInterval();
  });

  // 鼠标悬停暂停自动轮播
  const carouselContainer = document.querySelector('.carousel-container'); // 获取轮播容器元素
  carouselContainer.addEventListener('mouseenter', () => {
    clearInterval(slideInterval); // 鼠标悬停时，清除自动轮播定时器
  });

  // 鼠标离开继续自动轮播
  carouselContainer.addEventListener('mouseleave', () => { // 鼠标离开轮播容器时，启动自动轮播定时器
    startSlideInterval(); // 鼠标离开轮播容器时，启动自动轮播定时器
  });
}

// 初始化轮播
function initCarousel() {
  createIndicators();
  setupEventListeners();
  startSlideInterval();
}

// 启动轮播
initCarousel();
